<style lang="less">
 @import './main.less';
</style>

<template>
  <div class="layout">
    <Layout>
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <side-menu :isCollapsed="isCollapsed" :active-name="$route.name" :menuList="menuList" @on-select="turnToPage"/>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
          <div class="user-avator-dropdown" style="float: right; margin-right: 20px;">
            <Dropdown @on-click="handleClick">
              <Avatar src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"/>
              <Icon :size="18" type="md-arrow-dropdown"></Icon>
              <DropdownMenu slot="list">
                <DropdownItem name="logout">退出登录</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import sideMenu from './components/side-menu'
import axios from 'axios'
import URL from '@/api/login'
export default {
  data () {
    return {
      isCollapsed: false
    }
  },
  components: {
    sideMenu
  },
  computed: {
    rotateIcon () {
      return [
        'menu-icon',
        this.isCollapsed ? 'rotate-icon' : ''
      ]
    },
    menuList () {
      return this.$store.getters.menuList
    }
  },
  methods: {
    collapsedSider () {
      this.$refs.side1.toggleCollapse()
    },
    turnToPage (route) {
      this.$router.push({
        name: route
      })
    },
    async handleClick (name) {
      if (name === 'logout') {
        let result = await axios.get(URL.loginOut).then(res => {
          return res.data
        })
        if (result.code === 0 || result.code === 9999) {
          this.$Message.success(result.message)
          this.$router.push({ name: 'login' })
        } else {
          this.$Message.error(result.message)
        }
      }
    }
  }
}
</script>
